<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="../js/index.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-carousel :interval="4000" type="card" height="500px">
        <el-carousel-item v-for="(item,index) in data" :key="index">
            <h3 class="medium">{{ item.name }}</h3>
            <img :src="item.hardUrl" @click="open(item)">
        </el-carousel-item>
    </el-carousel>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="850px"
            :before-close="handleClose">
        <el-card class="box-card">
            <el-descriptions title="用户信息" :column="3">
                <el-descriptions-item label="证件照">
                    <img :src="form.hardUrl" height="100px" width="75px"/>
                </el-descriptions-item>
                <el-descriptions-item label="员工名称">{{form.name}}</el-descriptions-item>
                <el-descriptions-item label="员工工号">{{form.account}}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{form.phone}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{form.age}}</el-descriptions-item>
                <el-descriptions-item label="入职时间">{{form.createTime}}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{form.idCard}}</el-descriptions-item>
                <el-descriptions-item label="生日">{{form.birthday}}</el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag type="warning" size="mini" effect="dark" v-if="form.status==0">在职</el-tag>
                    <el-tag type="info" effect="dark" size="mini" v-if="form.status==1">离职</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="学位信息">{{form.education}}</el-descriptions-item>
                <el-descriptions-item label="专攻方向">{{form.major}}</el-descriptions-item>
            </el-descriptions>
            <div class="text item">
                <el-collapse @change="handleChange" accordion>
                    <el-collapse-item title="详细信息" name="1">
                        <div>{{form.introduction}}</div>
                    </el-collapse-item>
                    <el-collapse-item title="个人信息" name="2">
                        <div>{{form.prize}}</div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </el-card>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            form:{},
            data:[],
            dialogVisible :false,
        },
        created() {
            axios.get("/SectionAndDoctor/selectAll").then(resp=>{
                this.data = resp.data.data;
            })
        },
        methods: {
            open(form){
                this.dialogVisible = true;
                this.form = form;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleChange(val) {
                console.log(val);
            },
        },
    })
</script>

<style>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 40px;
        line-height: 500px;
        opacity: 0.75;
        margin: 100px 50px 0 0;
        float: right;
    }
    .el-carousel__item img {
        height: 500px;
        width: 375px;
        opacity: 0.75;
        float: left;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 800px;
    }
</style>
</body>
</html>